<template>
  <div class="Inspection-box">
    <!-- 标题 -->
    <div class="Inspection-box-title">
      <div class="title-left">00#储能单元PCS</div>
      <div class="title-shuxian">|</div>
      <div class="title-zhaungtai">正在巡检</div>
      <div class="title-Xhao" @click="addXhao"></div>
    </div>
    <!-- 内容 -->
    <div class="Inspection-box-content">
      <div class="content-top">
        <div class="top-item1">
          <div class="item1-left">健康度</div>
          <div class="item1-right">96%</div>
        </div>
        <div class="top-item2">
          <div class="item2-left">预警</div>
          <div class="item2-centre"></div>
          <div class="item2-right">是</div>
        </div>
        <div class="top-item3">
          <div class="item3-left">告警</div>
          <div class="item3-centre"></div>
          <div class="item3-right">是</div>
        </div>
      </div>
      <div class="content-botton">
        <div class="botton-item">
          <div class="bitem-left">已处理工单</div>
          <div class="bitem-right">200</div>
        </div>
        <div class="botton-item">
          <div class="bitem-left">待处理工单</div>
          <div class="bitem-right">0</div>
        </div>
      </div>
    </div>
    <!-- 储能单元 -->
    <div class="Inspection-danyuan-box">
      <div class="danyuanitem-box">
        <div class="danyuan-item">00#储能单元</div>
        <div class="danyuan-item">00#储能单元</div>
        <div class="danyuan-item">00#储能单元</div>
        <div class="danyuan-item1">00#储能单元</div>
        <div class="danyuan-item">00#储能单元</div>
        <div class="danyuan-item">00#储能单元</div>
      </div>
    </div>
    <!-- echarts图表 -->
    <div class="Inspection-Echarts-box">
      <div class="Echarts-title">健康度曲线</div>
      <div class="Echarts-title1">
        <div class="title1-left">整体评价:</div>
        <div class="title1-right">&nbsp;&nbsp;&nbsp;优</div>
      </div>
      <div id="jiankangduechats"></div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, nextTick } from "vue"
import { getCurrentInstance } from "vue" //访问内部组件实例
const { appContext } = getCurrentInstance()
const { $echarts, fontSize } = appContext.config.globalProperties
import "animate.css"
onMounted(() => {
  nextTick(() => {
    initEcharts()
  })
  addEventListener("resize", () => {
    initEcharts()
  })
})

const initEcharts = () => {
  let myChart = $echarts.getInstanceByDom(
    document.getElementById("jiankangduechats")
  )
  if (myChart) {
    // 如果不存在，就进行初始化
    myChart.dispose()
  }
  myChart = $echarts.init(document.getElementById("jiankangduechats"), null, {
    renderer: "svg"
  })

  let option = {
    grid: {
      top: "25%",
      left: "0%",
      right: "5%",
      bottom: "4%",
      containLabel: true
    },
    xAxis: {
      type: "category",
      data: [
        "2013",
        "2014",
        "2015",
        "2016",
        "2017",
        "2018",
        "2019",
        "2020",
        "2021",
        "2022",
        "2023"
      ],
      axisLine: {
        //坐标轴轴线相关设置。数学上的x轴
        show: true,
        lineStyle: {
          color: "#fff"
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: true,
        textStyle: {
          fontSize: 12,
          color: "#fff" //X轴文字颜色
        }
      }
    },
    tooltip: {
      trigger: "axis",
      // 设置浮层的 css 样式
      extraCssText:
        "width:50px;height:auto;background-color:rgba(0,0,0,0.3);color:#fff",
      formatter: function (params) {
        //params[0].name表示x轴数据
        let str = params[0].name + "<br/>"
        //params是数组格式
        for (let item of params) {
          //设置浮层图形的样式跟随图中展示的颜色
          str +=
            "<span style='display:inline-block;width:10px;height:10px;border-radius:10px;background-color:" +
            "#fff" +
            ";'></span>" +
            "\t" +
            item.seriesName +
            " : " +
            item.value
        }
        return str
      }
    },
    yAxis: [
      {
        type: "value",
        axisLine: {
          //坐标轴轴线相关设置。数学上的x轴
          show: true,
          lineStyle: {
            color: "#fff"
          }
        },
        axisTick: {
          show: false
        },

        axisLabel: {
          color: "#fff",
          fontSize: 12
        },
        splitLine: {
          show: false,
          lineStyle: {
            color: "#e7e9ef",
            type: "dashed"
          }
        }
      }
    ],
    series: [
      {
        name: "",
        type: "line",
        symbol: "circle", //标记的图形为实心圆
        symbolSize: 0, //标记的大小
        lineStyle: {
          width: 2,
          color: "#fff" // 线条颜色
        },
        itemStyle: {
          // 设置symbol的颜色
          normal: {
            color: "#fff"
          }
        },
        data: [175, 10, 153, 121, 156, 175, 160, 153, 121, 156, 180]
      }
    ]
  }
  // 这个方法的目的是为了跟随盒子大小改变而改变
  setTimeout(() => {
    myChart.resize()
  }, 1000)
  myChart.setOption(option)
}

const emit = defineEmits(["changeXhao"])
// 点击了X号
const addXhao = () => {
  emit("changeXhao")
}
</script>
<style scoped lang="less">
.Inspection-box {
  width: 100%;
  height: 100%;
  position: relative;
  div::-webkit-scrollbar {
    display: none;
    overflow: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE10+ */
    &::-webkit-scrollbar {
      display: none; /* ChromeSafari */
    }
  }
  .Inspection-box-title {
    position: absolute;
    top: 42px;
    left: 61px;
    width: 550px;
    height: 29px;
    display: flex;
    align-items: center;
    color: #fff;
    font-weight: 600;
    .title-left {
      margin-left: 20px;
    }
    .title-shuxian {
      height: 29px;
      margin-left: 10px;
      line-height: 24px;
    }
    .title-zhaungtai {
      margin-left: 10px;
    }
    .title-Xhao {
      width: 20px;
      height: 20px;
      background: url("@/assets/xunjian/anniu_guanbi.png") no-repeat center;
      background-size: 100% 100%;
      cursor: pointer;
      position: absolute;
      right: 20px;
    }
  }
  .Inspection-box-content {
    position: absolute;
    left: 200px;
    top: 88px;
    width: 410px;
    height: 70px;

    .content-top {
      width: 100%;
      height: 34px;
      display: flex;
      justify-content: space-between;
      .top-item1 {
        width: 134px;
        height: 34px;
        background: url("@/assets/xunjian/xinxizhanshi_duan.png") no-repeat
          center;
        background-size: 100% 100%;
        display: flex;
        color: #fff;
        font-weight: 600;
        align-items: center;
        position: relative;
        .item1-left {
          margin-left: 10px;
        }
        .item1-right {
          position: absolute;
          right: 10px;
        }
      }
      .top-item2 {
        width: 134px;
        height: 34px;
        background: url("@/assets/xunjian/xinxizhanshi_duan_yujing.png")
          no-repeat center;
        background-size: 100% 100%;
        color: #fff;
        display: flex;
        font-weight: 600;
        align-items: center;
        position: relative;
        .item2-left {
          margin-left: 10px;
        }
        .item2-centre {
          margin-top: 2px;
          margin-left: 43px;
          width: 16px;
          height: 16px;
          background-color: red;
          background: url("@/assets/xunjian/deng_yujing.png") no-repeat center;
          background-size: 100% 100%;
        }
        .item2-right {
          position: absolute;
          right: 10px;
        }
      }
      .top-item3 {
        width: 134px;
        height: 34px;
        background: url("@/assets/xunjian/xinxizhanshi_duan_gaojing.png")
          no-repeat center;
        display: flex;
        background-size: 100% 100%;
        color: #fff;
        font-weight: 600;
        align-items: center;
        position: relative;
        .item3-left {
          margin-left: 10px;
        }
        .item3-centre {
          margin-top: 2px;
          margin-left: 43px;
          width: 16px;
          height: 16px;
          background-color: red;
          background: url("@/assets/xunjian/deng_gaojing.png") no-repeat center;
          background-size: 100% 100%;
        }
        .item3-right {
          position: absolute;
          right: 10px;
        }
      }
    }
    .content-botton {
      margin-top: 4px;
      width: 100%;
      height: 34px;
      display: flex;
      justify-content: space-between;
      .botton-item {
        width: 200px;
        height: 34px;
        background: url("@/assets/xunjian/xinxizhanshi_chang.png") no-repeat
          center;
        background-size: 100% 100%;
        display: flex;
        color: #fff;
        font-weight: 600;
        align-items: center;
        position: relative;
        .bitem-left {
          margin-left: 10px;
        }
        .bitem-right {
          position: absolute;
          right: 10px;
        }
      }
    }
  }
  .Inspection-danyuan-box {
    position: absolute;
    padding: 8px 8px 0px 8px;
    box-sizing: border-box;
    top: 87px;
    left: 40px;
    width: 148px;
    height: 227px;
    color: #fff;
    font-size: 15px;

    .danyuanitem-box {
      width: 100%;
      height: 100%;
      overflow: scroll;
      .danyuan-item {
        text-align: center;
        width: 130px;
        height: 28px;
        line-height: 28px;
        margin-bottom: 9px;
        background: url("@/assets/xunjian/anniu_chunengdanyuan_pt.png")
          no-repeat center;
        background-size: 100% 100%;
      }
      .danyuan-item1 {
        text-align: center;
        width: 130px;
        height: 28px;
        line-height: 28px;
        margin-bottom: 9px;
        background: url("@/assets/xunjian/anniu_chunengdanyuan_dj.png")
          no-repeat center;
        background-size: 100% 100%;
      }
    }
  }
  .Inspection-Echarts-box {
    width: 420px;
    height: 148px;
    position: absolute;
    left: 200px;
    top: 165px;
    .Echarts-title {
      font-size: 16px;
      color: #fff;
      font-weight: 600;
      position: absolute;
      left: 25px;
      top: 1px;
    }
    .Echarts-title1 {
      color: #fff;
      font-weight: 600;
      position: absolute;
      right: 30px;
      top: 2px;
      display: flex;
      .title1-left {
        font-size: 14px;
      }
      .title1-right {
        color: #5bf653;
        font-size: 14px;
      }
    }
    #jiankangduechats {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
